<template>
	<view class="task-item flex justify-between align-center">
		<view>
			<view class="task-item__text1"> {{ data.remark }} </view>
			<view class="task-item__text2">
				直推积分<text class="task-item__text3">+{{ data.score }}</text> 奖励<text
					class="task-item__text3">{{ data.money }}</text>
			</view>
		</view>

		<view class="task-btn" @tap="getMoney">
			<!-- is_receive = 0的才能领取，1是领取过啦 -->
			<image :src="data.is_receive=='0'?'/static/images/task-get-btn.png':'/static/images/notask.png'"
				mode="widthFix" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: {},
			},
		},
		methods: {
			getMoney() {
				let that = this;
				this.$http("commission.receive", {
					id: that.data.id
				}).then(res => {
					that.$u.toast(res.msg);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.task-item {
		width: 100%;
		height: 176rpx;
		margin-top: 20rpx;
		padding: 0 30rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		&__text1 {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			font-style: normal;
			text-transform: none;
		}

		&__text2 {
			margin-top: 10rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			font-style: normal;
			text-transform: none;
		}

		&__text3 {
			margin-top: 10rpx;
			margin-right: 12rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ff1d1d;
			font-style: normal;
			text-transform: none;
		}

		.task-btn {
			width: 108rpx;
			height: 108rpx;
		}
	}
</style>
